<template>
    <div class="water-report">
        <c-wrap title="缴费记录">
            <c-cell></c-cell>
            <div style="font-size: 12px;text-align: left;margin: 5px 10px">
                共<span style="color: red">{{data.length}}</span>条记录
                <span style="opacity: .6">(默认查询跨度为6个月)</span>
                <span style="float: right">
                    共计
                    <span style="color: red">
                        <span v-if="totalValue">{{totalValue}}</span>
                        <span v-else>--</span>
                    </span>
                    元
                </span>
            </div>
            <div v-if="data.length>0">
                <mt-cell v-for="(item, index) in data" :key="index" :title="item.createTime">
                    <div>
                        <p>{{item.money}}元</p>
                        <p style="font-size: 12px;color: gray">{{item.statusTxt}}</p>
                    </div>
                </mt-cell>
            </div>
            <div v-else :style="{height:height+'px','line-height':height+'px'}">暂无数据</div>
        </c-wrap>
    </div>
</template>
<script>
    import CWrap from '../../components/CWrap'
    import CCell from '../../components/CCell'

    export default {
        components: {CWrap, CCell},
        data() {
            return {
                data: [],
                totalValue: 0,
                height: app.config.setting.height.display - app.config.setting.height.top - 92 - 26
            }
        },
        methods: {
            loadData() {
                this.data = [];
                app.ajax.get(app.config.api.business.list, {
                    type: '1',
                }, (res) => {
                    this.totalValue = res.data.money;
                    res.data.list.forEach((val) => {
                        this.data.push({
                            createTime: app.util.formatDate(val.createTime, 'yyyy-MM-dd hh:mm:ss'),
                            statusTxt: val.statusTxt,
                            typeTxt: val.typeTxt,
                            money: val.money,
                        })
                    })
                })
            },
        },
        mounted() {
            this.loadData();
        }
    }
</script>

